<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.loginName"
                    placeholder="登录名称"
                />
            </el-form-item>
            <el-form-item style="width: 300px">
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.chatRooms" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column fixed prop="houseUserName" label="房主名称" align="center" width="300px"/>
            <el-table-column prop="chatUserName" label="聊天人名称" align="center" width="150px"/>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="viewChatMessageHistory(scope.row.uuid)"
                        type="info"
                        size="mini"
                    >聊天记录
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
    </div>
</template>

<script>
import {reactive, onMounted} from 'vue'
import {page} from '@/api/chat/chatRoom'
import {useRouter} from 'vue-router'

export default {
    setup() {
        const data = reactive({
            chatRooms: [],
            total: 0
        })
        const searchParam = reactive({
            page: 1,
            size: 10,
            loginName: ''
        })
        const router = useRouter();
        /**
         * 分页查询聊天室
         */
        const pageSearchChatRoom = async () => {
            page(searchParam).then(res => {
                data.chatRooms = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 查询
         */
        const search = () => {
            pageSearchChatRoom()
        }
        /**
         * 跳转到聊天记录页面
         * @param {*} uuid
         */
        const viewChatMessageHistory = (uuid) => {
            router.push({path: "/chatRoom/chatHistory", query: {uuid: uuid}})
        }
        onMounted(() => {
            pageSearchChatRoom()
        })
        return {
            data,
            searchParam,
            search,
            viewChatMessageHistory
        }
    }
}
</script>
